<extend name="Base/common"/>

<block name="body">
    <div class="col-md-10 bg">
       <div class="row ml-30 ">
            <notempty name="bookgame">
            <volist name="bookgame" id="book_game" key="i">
            <div class="clearfix"></div>
            <h3 class="game-title"><span class="bt-3 pt-10"><i class="fa fa-modx pr-10" aria-hidden="true"></i>{$book_game.book_game_name}</span></h3>
            <h4 class="mt-20"><span class="book-read "><i class="fa fa-info-circle pr-10" aria-hidden="true"></i>比赛信息</span></h4>
            <div class="col-md-5">
            <p>比赛开始时间：<span>{$book_game.start_time|time_format}</span></p>
            <p>涉及班级：<a href="#" data-bookgameid="{$book_game.book_game_id}" data-whatever="classinfo" data-toggle="modal" data-target="#classModal">查看班级</a></p>
            </div>
            <div class="col-md-7 now-score">
               <p class="text-center ">当前比赛积分：<span class="nowgame-score">{$book_game.integral}</span>分</p>
            </div>
           <div class="clearfix"></div>
            <!-- 未读图书开始 -->
            <h4 class="mt-20"><span class="book-read "><i class="fa fa-play-circle-o pr-10" aria-hidden="true"></i>未读图书</span></h4>
            <div class="fenge"></div>
            <volist name="book_game.student_game" id="notstart" key="j">
            <if condition="$notstart.isready eq 1">
            <!-- 媒体开始 -->
            <div class="media col-md-6 book-list">
                <div class="media-left media-middle book-limg">
                    <a  data-toggle="popover" role="button" data-trigger="hover" tabindex="0" title="{$notstart.bookname}" data-content="{$notstart.intro}">
                        <img class="media-object  book-img" src="__ROOT__{$notstart.cover}" alt="...">
                    </a>
                </div>
                <div class="media-body book-info">
                    <div class="col-md-9">
                        <h4 class="media-heading txt">{$notstart.bookname}</h4>
                    </div>
                    <div class="col-md-9 book-intro">
                        <p class="txt">{$notstart.author}</p>
                        <p class="txt">出版社：{$notstart.press}</p>
                        <p class="txt">页数：100页</p>
                        <p class="txt">出版年：2010年</p>
                    </div>
                    <div class="class-info col-md-9">
                        <i class="fa fa-hand-o-right" aria-hidden="true"></i><span class="has-read">班级已读人数：{$notstart.read_times}人</span>

                    </div>
                    <a href="" class="btn btn-custom start-book " data-whatever="start" data-id="{$notstart['id']}" data-bookgameid="{$notstart['book_game_id']}" data-bookname="{$notstart['bookname']}" data-toggle="modal" data-target="#myModal" >开始阅读</a>
                  </div>
            </div>
            <!-- 媒体结束 -->
            <else/>
                <if condition="$j eq 0">
                <p style="float: left;">当前没有未读图书</p>
                </if>
            </if>
            </volist>
            <!-- 未读图书结束 -->
            <div class="clearfix"></div>
            <!-- 在读图书开始 -->
            <h4 class="mt-20"><span class="book-read "><i class="fa fa-pause-circle pr-10" aria-hidden="true"></i>在读图书</span></h4>
            <div class="fenge"></div>
            <volist name="book_game.student_game" id="nowstart" key="k">
            <if condition="$nowstart.isready eq 2"> 
            <!-- 媒体开始 -->
            <div class="media col-md-6 book-list">
                <div class="media-left media-middle book-limg">
                    <a href="" data-toggle="popover" role="button" data-trigger="hover" tabindex="0" title="{$nowstart.bookname}" data-content="{$nowstart.intro}">
                        <img class="media-object book-img" src="__ROOT__{$nowstart.cover}" alt="...">
                    </a>
                </div>
                <div class="media-body book-info">
                    <div class="col-md-9">
                        <h4 class="media-heading txt">{$nowstart.bookname}</h4>
                    </div>
                    <div class="col-md-9 book-intro">
                        <p class="txt">{$nowstart.author}</p>
                        <p class="txt">出版社：{$nowstart.press}</p>
                        <p class="txt">页数：100页</p>
                        <p class="txt">出版年：2010年</p>
                    </div>
                    <div class="class-info col-md-9">
                        <i class="fa fa-hand-o-right" aria-hidden="true"></i><span class="has-read">班级已读人数：{$nowstart.read_times}人</span>

                    </div>
                    <a href="" class="btn start-book btn-red" data-whatever="end" data-id="{$nowstart['id']}" data-bookid="{$nowstart['bookid']}" data-bookgameid="{$nowstart['book_game_id']}" data-bookname="{$nowstart['bookname']}" data-toggle="modal" data-target="#myModal">结束阅读</a>
                  </div>
            </div>
            <!-- 媒体结束 -->
            <!-- 在读图书结束 -->
            <else/>
                <if condition="$k eq 0">
                <p style="float: left;">当前没有在读图书</p>
                </if>
            </if>
            </volist>
            <div class="clearfix"></div>
            <!-- 读完图书开始 -->
            <h4 class="mt-20"><span class="book-read "><i class="fa fa-stop-circle pr-10" aria-hidden="true"></i>读完图书</span></h4>
            <div class="fenge"></div>
            <volist name="book_game.student_game" id="end" key="m">
            <if condition="$end.isready eq 0"> 
            <!-- 媒体开始 -->
            <div class="media col-md-6 book-list">
                <div class="media-left media-middle book-limg">
                    <a href="#" data-toggle="popover" role="button" data-trigger="hover" tabindex="0" title="{$end.bookname}" data-content="{$end.intro}">
                        <img class="media-object book-img" src="__ROOT__{$end.cover}" alt="...">
                    </a>
                </div>
                <div class="media-body book-info">
                    <div class="col-md-9">
                        <h4 class="media-heading txt">{$end.bookname}</h4>
                    </div>
                    <div class="col-md-9 book-intro">
                        <p class="txt">{$end.author}</p>
                        <p class="txt">出版社：{$end.press}</p>
                        <p class="txt">页数：100页</p>
                        <p class="txt">出版年：2010年</p>
                    </div>
                    <div class="class-info col-md-9">
                        <i class="fa fa-hand-o-right" aria-hidden="true"></i><span class="has-read">班级已读人数：{$end.read_times}人</span>

                    </div>
                    <div class="col-md-5 btn-zu">
                        <a href="#" class="btn btn-blue write-question" data-whatever="question" data-toggle="modal" data-target="#classModal" data-id="{$end['id']}" data-bookid="{$end['bookid']}" data-bookgameid="{$end['book_game_id']}" data-bookname="{$end['bookname']}">做题目</a>
                    <a href="#" class="btn btn-blue write-question mt-10" data-whatever="writeNote" data-toggle="modal" data-target="#myModal" data-bookname="{$end['bookname']}" data-id="{$end['id']}">写笔记</a>
                    </div>
                    
                  </div>
            </div>
            <!-- 媒体结束 -->
            <!-- 读完图书结束 -->
            <else/>
                <if condition="$m eq 0">
                <p style="float: left;">当前没有读完图书</p>
                </if>
            </if>
            </volist>
        </volist>
        <else/>
                <h2 class="text-center">OH！暂时没有比赛</h2>
         </notempty>
       </div>
    </div>
</block>
<block name="script">
    <link rel="stylesheet" type="text/css" href="__CSS__/quiz.css">
    <script type="text/javascript" src="__JS__/quiz.js"></script>
    <script type="text/javascript">
     //导航高亮
    highlight_subnav("{:U('Student/index')}");
    //手动初始化Tip
    $('[data-toggle="popover"]').popover();
        $(function(){
            /*鼠标移动到书的条目上，增加阴影*/
            $(".media").mouseover(function(){
                $(this).addClass("book-style");
            }).mouseout(function(){
                $(this).removeClass("book-style");
            });
           
        
        $('#classModal').on('show.bs.modal',function(event){
            var button     = $(event.relatedTarget);
            var bookgameid = button.data('bookgameid');
            var id         = button.data('id');
            var bookid     = button.data('bookid');
            var bookname   = button.data('bookname');
            var modal      = $(this);
            var modalbody  = modal.find('.modal-body');
            var title      = modal.find('.modal-title');
            var status     = button.data('whatever');
            modal.find('.modal-body').empty();
            switch(status){
                case 'classinfo':
                modal.find('.modal-title').text("本次比赛班级");
                $.ajax({
                    url:"{:U('getClass')}",
                    type:'GET',
                    data:{'bookgameid':bookgameid},
                    success:function(data){
                        modalbody.empty();
                        for(var i = 0; i < data.length; i++){
                            modalbody.append("<p>"+data[i].class_sno+"</p>");
                        }
                    }
                });
                break;
                case 'question':
                title.text(bookname+"题目");
                     modal.find('.modal-body').append("<div id='quiz-container'></div>");
                            $.ajax({
                                url:"{:U('answerQuestion')}",
                                data:{'bookgameid':bookgameid,'id':id,'bookid':bookid},
                                type:'GET',
                                success:function(data){
                                    var test =[];
                                    for(var i=0;i<data.length;i++){
                                        if(data[i].answer == 'A'){
                                           data[i].answer = 1; 
                                        }else if(data[i].answer == 'B'){
                                           data[i].answer = 2; 
                                        }else if(data[i].answer == 'C'){
                                           data[i].answer = 3; 
                                        }else if(data[i].answer == 'D'){
                                           data[i].answer = 4; 
                                        }
                                        var ztest ={
                                                    'question':data[i].title,
                                                    'answers':[
                                                        data[i].option_a,
                                                        data[i].option_b,
                                                        data[i].option_c,
                                                        data[i].option_d
                                                    ],
                                                    'correctAnswer':data[i].answer
                                                }
                                                test.push(ztest);
                                            }
                                          
                                    var init ={'questions':test};
                                    $('#quiz-container').jquizzy({questions: init.questions,url:"{:U('Student/answerQuestion')}",id:id});
                                  //  $('.nav-start img').src('__IMG__/start.gif');
                                    /* $btn.button('reset');
                                     $('#myModal').modal('hide');
                                     //console.log(data.url);
                                     window.location.href=data.url;*/
                                }
                           
                         });
                         break;    
            }
            
        })
        $('#myModal').on('show.bs.modal',function(event){
            var button     = $(event.relatedTarget); 
            var status     = button.data('whatever');
            var bookgameid = button.data('bookgameid');
            var id         = button.data('id');
            var bookid     = button.data('bookid');
            var bookname   = button.data('bookname');
            var modal      = $(this);
            var title      = modal.find('.modal-title');
            var body       = modal.find('.modal-body'); 
            modal.find('.modal-body').empty();
            switch(status){
                case 'start':
                    modal.find('.modal-title').text("提示框");
                    var warn = '<div class="alert alert-warning" role="alert">'
                        +'您将要开始阅读'
                        +'<strong>'+bookname+'</strong>!'
                        +'</div>';
                    body.html(warn);
                    modal.find('#save').click(function(){
                        var $btn = $(this).button('loading');
                        $.ajax({
                            url:"{:U('startRead')}",
                            data:{'bookgameid':bookgameid,'id':id},
                            type:'GET',
                            success:function(data){
                                 $btn.button('reset');
                                 $('#myModal').modal('hide');
                                 //console.log(data.url);
                                 window.location.href=data.url;
                            }
                        })
                    })
                    break;
                case 'end':
                    modal.find('.modal-title').text("提示框");
                    var warn = '<div class="alert alert-danger" role="alert">'
                        +'您将要结束阅读'
                        +'<strong>'+bookname+'</strong>!'
                        +'</div>';
                    body.html(warn);
                    modal.find('#save').click(function(){
                        var $btn = $(this).button('loading');
                        $.ajax({
                            url:"{:U('endRead')}",
                            data:{'bookgameid':bookgameid,'id':id,'bookid':bookid},
                            type:'GET',
                            success:function(data){
                                 $btn.button('reset');
                                 $('#myModal').modal('hide');
                                 //console.log(data.url);
                                 window.location.href=data.url;
                            }
                        })
                     })
                    break;
                case 'writeNote':
                    $.ajax({
                        url:"{:U('writeNote')}",
                        data:{'bookname':bookname,'id':id},
                        type:'GET',
                        success:function(data){
                             modal.find('.modal-title').text(data.bookname+"笔记");
                            if(data.note == null){data.note=''}
                               var content  = '<form class="form-horizontal " id="notes" action="{:U('writeNote')}" method="post">'
                               +'<textarea class="form-control" name="note" rows="15">'+data.note+'</textarea>'
                               +'<input type="hidden" name="id" value="'+data.booklistid+'"></input>'
                               +'</form>';
                               modal.find('.modal-body').html(content);
                        }
                            })
                   
                   modal.find('#save').click(function(){
                        var $btn = $(this).button('loading');
                        var text = $("#notes").serialize();
                        $.ajax({
                            url:"{:U('writeNote')}",
                            data:text,
                            type:'POST',
                            success:function(data){
                                 $btn.button('reset');
                                 $('#myModal').modal('hide');
                                 //console.log(data.url);
                                 window.location.href=data.url;
                            }
                        })
                     })

            }
        })
    })
      /*  $(function(){
            var init={'questions':
            [
                {'question':'jQuery是什么？',
                 'answers':['JavaScript库','CSS库','PHP框架','以上都不是'],
                 'correctAnswer':1},
                {'question':'找出不同类的一项?',
                 'answers':['写字台','沙发','电视','桌布'],
                 'correctAnswer':3},
                {'question':'国土面积最大的国家是：',
                 'answers':['美国','中国','俄罗斯','加拿大'],
                 'correctAnswer':3},
                {'question':'月亮距离地球多远？',
                 'answers':['18万公里','38万公里','100万公里','180万公里'],
                 'correctAnswer':2},
            ]};
        $('#quiz-container').jquizzy({
        questions: init.questions
        })
});*/
    </script>
</block>